<template>
  <div>
    <div class="grid">
      <div>
        <h1>图书管理</h1>
        <div class="book">
          <div>
            <label for="id">编号:</label>
            <input type="text" id="id" v-model="id" :disabled="tab" v-focus />
            <label for="name">名称:</label>
            <input type="text" id="name" v-model="name" />
          </div>
        </div>
      </div>
    </div>

    <div class="total">
      <span>图书总数：</span>
      <span>{{ total }}</span>
    </div>

    <table>
      <thead>
        <tr>
          <th>编号</th>
          <th>名称</th>
          <th>时间</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr :key="item.id" v-for="item in books">
          <td>{{ item.id }}</td>
          <td>{{ item.name}}</td>
          <td>{{ item.data}}</td>
          <td>
            <a href @click.prevent="toEdit(item.id)">修改</a>
            <span>|</span>
            <a href @click.prevent="toDel(item.id)">删除</a>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default{
  data() {
    return {
      id: "",
      name: "",
      tab: false,
      submitTab: false,
      books: [
        {
          id: 1,
          name: "梅花三弄",
          data: "2023.1.5",
        },
        {
          id: 2,
          name: "傲慢与偏见",
          data: "2022.6.20",
        },
        {
          id: 3,
          name: "沉香屑",
          data: "2023.2.15",
        },
        {
          id: 4,
          name: "红楼梦",
          data: "2023.2.10",
        },
        {
          id: 5,
          name: "西游记",
          data: "2023.3.4",
        },
      ],
    };
  },
  methods: {
    // Headers() {
    //   if (this.tab) {
    //     this.books.some((item) => {
    //       if (item.id == this.id) {
    //         item.name = this.name;
    //         this.id = "";
    //         this.name = "";
    //         return true;
    //       }
    //     });
    //     this.tab = false;
    //   } else {
    //     // 添加图书
    //     if (this.id != "" && this.name != "") {
    //       let book = {};
    //       book.id = this.id;
    //       book.name = this.name;
    //       book.data = "";
    //       this.books.push(book);
    //     }
    //     //清空表单
    //     this.id = "";
    //     this.name = "";
    //   }
    // },
    toEdit(id) {
      //禁止修改id
      this.tab = true;
      let book = this.books.filter(function (item) {
        return item.id == id;
      });
      this.id = book[0].id;
      this.name = book[0].name;
    },
    toDel(id) {
      this.books = this.books.filter(function (item) {
        return item.id != id;
      });
    },
  },
  filters: {
    dformat(val, format) {
      return dateFormat(val, format);
    },
  },
  directives: {
    focus: {
      inserted(el) {
        el.focus();
      },
    },
  },
  computed: {
    total() {
      return this.books.length;
    },
  },
  watch: {
    name(val) {
      let tab = this.books.some(function (item) {
        return item.name == val;
      });
      if (tab) {
        this.submitTab = true;
      } else {
        this.submitTab = false;
      }
    },
  },
  // mounted() {
  //   let data = [
  //     {
  //         id: 1,
  //         name: "梅花三弄",
  //         data: "2023.1.5",
  //       },
  //       {
  //         id: 2,
  //         name: "傲慢与偏见",
  //         data: "2022.6.20",
  //       },
  //       {
  //         id: 3,
  //         name: "沉香屑",
  //         data: "2023.2.15",
  //       },
  //   ]
  //   this.books = data
  // },
  
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
.grid {
  width: 1073px;
  height: 84px;
  background: #8c222c;
  float: left;
}
div .book {
  width: 973px;
  overflow: hidden;
  padding: 10px 50px;
  background-color: #ffa500;
  color: #cd3700;
}
div .book input {
  outline: none;
  border: 1px solid #cd3700;
  font-size: 19px;
  width: 190px;
  height: 20px;
}
div .book button {
  outline: none;
  color: #cd3700;
  border-radius: 5px;
  background-color: #ff6347;
  border: 1px solid #cd3700;
}
table,
table tr th,
table tr td {
  padding: 25px;
  border-collapse: collapse;
  border: 1px dashed orange;
  text-align: center;
}
.total {
  width: 1073px;
  height: 30px;
  color:#cd3700;
  line-height: 30px;
  text-align: center;
  background-color: #ff6347;
  border-top: 1px dashed #cd3700;
  float: left;
}
table {
  width: 1073px;
}
thead {
  background-color: orange;
  /* border: 1px solid black; */
}
</style>